<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div {
			margin: 0 auto;
		}
		
		.NO1 {
			width: 200px;
			height: 200px;
			background: skyblue;
			text-align: center;
			line-height: 200px;
			animation-name: no1;
			animation-duration: 2s;
			animation-direction: normal;
			animation-fill-mode: forwards;
			position:relative;
			border-radius: 10%;
		}
		
		@keyframes no1 {
			from {left: 0px;top: 0px;}
			25% {
				left: -200px;
				top: 50px;
			}
			50% {
				left: 0px;
				top: 100px;
			}
			75% {
				left: 200px;
				top: 50px;
			}
			to {left: 0px;
				top: 0px;}
		}
		/*@webkit-keyframes no1{
			from{top: -100%;}
			to{top: 300%;}
		}*/
		
		.NO2 {
			width: 300px;
			height: 300px;
			background: pink;
			border-radius: 50%;
			text-align: center;
			line-height: 300px;
			margin-top: 50px;
		}
		
		a {
			font-size: 20px;
			color: white;
			text-decoration: none;
		}
	</style>

	<body>
		<div class="NO1">
			<a href="fitst.html">项目1</a>
		</div>
		<div class="NO2">
			<a href="second.html">项目2</a>
		</div>
	</body>

</html>